<html>
<#include "../common/header.ftl" />

<link rel="stylesheet" type="text/css"
	href="static/dist/css/wangEditor.min.css">
<script type="text/javascript" src="static/dist/js/wangEditor.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('#commentBtn').on('click', function() {
			if (($("#textarea1").val().trim()) == '') {
				alert('内容不可为空！');
				return;
			}
			let obj = {};
			obj.uId = parseInt($("#ip1").val().trim());
			obj.newsId = $("#ip2").val();
			obj.content = $("#textarea1").val().trim();
			console.log(JSON.parse(JSON.stringify(obj)))
			$.ajax({
				url : "comment?method=add",
				type : "POST",
				data : JSON.stringify(obj),
				scriptCharset : 'utf-8',
				contentType : "application/json; charset=utf-8",
				success : function(res) {
					let data = JSON.parse(res)
					let item = data.data
					console.log('data=>',data)
					if(data.code === 0 ){
							$("#parent").append("<div class='panel panel-primary'><div class='panel-body'><h4 ><span>"+item[0].user.nickname+"<span style='font-size:16px;color:#ccc'><i>(我)</i></span><span style='margin-left: 25px;font-size:16px;color:#ccc'><i>刚刚</i></span></span></h4></div><div class='panel-footer'><p class='list-group-item-text'>"+item[0].content+" </p></div></div>")
					}
				},
				error : function(res) {
					console.log("error", res);
				}
			});
			/* console.log('data', $('form').serializeArray()) */
		})
		$('#pass').on(
				'click',
				function() {
					$.get("news", {
						method : "pass",
						id : $("#newsId").val()
					}, function(data) {
						$("#box").removeClass("alert-warning").addClass(
								"alert-success");
						$("#admin").hide();
					});
					console.log('data', $('form').serializeArray())
				}), $('#remove').on(
				'click',
				function() {
					$.get("news", {
						method : "remove",
						id : $("#newsId").val()
					}, function(data) {
						$("#box").removeClass("alert-warning").css(
								"backgroundColor", "rgba(255,69,0,0.4)");
						$("#admin").hide();
					});
					console.log('data', $('form').serializeArray())
				})
	});
</script>
</head>

<#if Session.user ?? && user.role==1>
<body style="margin-left: 200px">

	<div id="wrapper" class="toggled"><#include "../common/nav.ftl"
		/></div>
	<#else>
<body>
	</#if>

	<div class="container">
		<div class="row clearfix">
			<div class="col-md-12 column">
				<#include "../common/bread.ftl"/>
				<blockquote>
					<h2 style="display:block"> 
					<div <#if news.newsClick gt 100>
								style="color:red"						
							</#if> >${news.newsName }
							<#if news.newsClick gt 100 && news.newsClick lte 400>
							<span class="glyphicon glyphicon-fire" />
							</#if>
							<#if news.newsClick gt 401 && news.newsClick lte 800>
							<span class="glyphicon glyphicon-fire" />
							<span class="glyphicon glyphicon-fire" />
							</#if>
							<#if news.newsClick gt 801>
							<span class="glyphicon glyphicon-fire" />
							<span class="glyphicon glyphicon-fire" />
							<span class="glyphicon glyphicon-fire" />
							</#if>
							
						<span class="label label-danger">New</span> 
							
						<#if news.newsState == 0> <span class="label label-warning">待审核</span></#if> 
						<#if news.newsState == 2> <span class="label label-danger">已废弃</span> </#if>
						</div>
						<#if news.uId ==
						Session.user.id> <a class="btn btn-primary"
							href="news?method=edit_page&id=${news.newsId }"
							style="float: right">修改</a> </#if>
					</h2>
					<p style="padding:5px;height:35px;"><span style="font-size:20px;vertical-align:middle;" class="glyphicon glyphicon-eye-open"/><span style="font-family: 'Microsoft YaHei';padding:10px"><b>${news.newsClick }</b></span></p>
					<#if news.newsType ?? && news.newsType?size gt 0 > <#list
					news.newsType as _item> <span class="label label-info"
						style="margin-right: 0px; margin-left: 5px">${ _item}</span>
					</#list> <#else> <span class="label label-info"
						style="margin-right: 0px; margin-left: 5px">其他</span> </#if>
					<p></p>
					<small>负责人：${news.newsAuthor } <cite>${news.createtime?string("yyyy-MM-dd HH:mm:ss")}</cite></small>
				</blockquote>
				<div id="box"
					class="alert <#if news.newsState==0>alert-warning </#if>
				<#if news.newsState==1>alert-success </#if>
				  alert-dismissable"
					<#if news.newsState==2>alert-error
					style="background:rgba(255,69,0,0.4)" </#if> >
					<button type="button" class="close" data-dismiss="alert"
						aria-hidden="true">×</button>
					<strong>--[${news.newsKeywords} ]</strong>
					<p class="text-error">
						<em>Git</em>${news.newsContent }
					</p>
					
					<#if Session.user.role ?? && Session.user.role == 1> 
							<#if news.newsState == 0> 
							<div id="admin">
							<hr style="padding-top:5px;margin-top:75px"/>
								<a id="pass" href="#" class="alert-link">支持👍</a>
								<a id="remove" href="#" class="alert-link">反对👎</a>
								<input id="newsId" type="hidden" value="${news.newsId }"/>
								</div>
							</#if>
					</#if>
				</div>
				<hr/>
	<form class="container"
					style="width: 100%; margin:25px 0 55px 0; max-width: 1380px" role="form">
					<div class="form-group">
						<label><h2>纯净交流区♨️：</h2></label>
						<textarea name="newsContent" id="textarea1" style="height: 300px"
							placeholder="请输入...">
						</textarea>
						<script type="text/javascript">
							var editor = new wangEditor('textarea1');
							editor.create();
						</script>
					</div>
					<input id="ip1" type="hidden"
						value=<#if Session.user ??> ${Session.user.id } </#if> />
					<input id="ip2" type="hidden"
						value=${news.newsId } />
					<button id="commentBtn" type="button" class="btn btn-default">
						提交
					</button>
				</form>
	<hr/>
	<div id="parent">
	</div>
			
				<#if commentDTOs ?? >
				 <#list commentDTOs as item>
				<div class="list-group">
					<div class="panel panel-primary">
						<div class="panel-body">
						<h4 class="">
							${item.user.nickname}
								<#if item.user.point gt 100 && item.user.point lt 200 > <img
									style="width: 18px; padding-bottom: 4px"
									src="static/image/v_1.png" /></#if> <#if item.user.point gt
								201 && item.user.point lt 300 > <img
									style="width: 18px; padding-bottom: 4px"
									src="static/image/v_2.png" /></#if> <#if item.user.point gt
								301 && item.user.point lt 400 > <img
									style="width: 18px; padding-bottom: 4px"
									src="static/image/v_3.png" /></#if> <#if item.user.point gt
								401> <img style="width: 18px; padding-bottom: 4px"
									src="static/image/v_4.png" /></#if> <span
									style="margin-left: 25px">${item.createtime?string("yyyy-MM-dd HH:mm:ss")}</span>
							</h4>
						</div>
						<div class="panel-footer">
							<p class="list-group-item-text">${item.content }</p>
						</div>
					</div>
				</div>
				</#list> 
				</#if>
			</div> 
			</div>
		</div>
	</div>
	<script src="static/js/bootstrap.min.js"></script>
</body>
</html>